<div class="content-wrapper" [@routerTransition]>
    <sub-header  idName="Administration.OrganizationUnits" [title]="'OrganizationUnits' | localize" [description]="'OrganizationUnitsHeaderInfo' | localize">
    </sub-header>
    <section class="content d-flex flex-column flex-column-fluid">
        <div [class]="containerClass">
            <div class="row">
                <div class="col-6">
                    <organization-tree #ouTree (ouSelected)="ouSelected($event)"></organization-tree>
                </div>
                <div class="col-6">
                    <div class="card card-default gutter-b  card-outline">
                        <div class="card-header align-items-center border-0">
                            <h3 class="card-title align-items-start flex-column marginHalf">
                                <span class="font-weight-bolder text-dark">  <span *ngIf="organizationUnit">{{organizationUnit.displayName}}</span></span>
                            </h3>
                            <div class="card-tools">
                                <button *ngIf="('Pages.Administration.OrganizationUnits.ManageMembers' | permission) && organizationUnit && selectedTabId =='memberTab'" (click)="openAddMemberModal()" class="btn btn-primary  btn-circle blue">
                                    <i class="fa fa-plus"></i> {{"AddMember" | localize}}
                                </button>
                                <button *ngIf="('Pages.Administration.OrganizationUnits.ManageRoles' | permission) && organizationUnit && selectedTabId =='roleTab'" (click)="openAddRoleModal()" class="btn btn-primary  btn-circle blue">
                                    <i class="fa fa-plus"></i> {{"AddRole" | localize}}
                                </button>
                            </div>
                        </div>
                        <div class="card-body">
                            <tabset class="tab-container">
                                <tab heading="{{'Members' | localize}}" id="memberTab" [active]="true" (selectTab)="onSelect($event)">
                                    <organization-unit-members #ouMembers 
                                                               (memberRemoved)="ouTree.memberRemoved($event)"></organization-unit-members>
                                </tab>
                                <tab heading="{{'Roles' | localize}}" id="roleTab" (selectTab)="onSelect($event)">
                                    <organization-unit-roles #ouRoles 
                                                             (roleRemoved)="ouTree.roleRemoved($event)"></organization-unit-roles>
                                </tab>
                            </tabset>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>
<addRoleModal #addRoleModal (rolesAdded)="addRoles($event)"></addRoleModal>
<addMemberModal #addMemberModal (membersAdded)="addMembers($event)"></addMemberModal>
